<template>
  <div class="town">
    <div class="town_left">
      <div class="town_left_top">
        <div class="title_left">
          <img src="@/assets/img/townPreview/line chart.png" alt="">
          <h3>项目执行率排名</h3>
          <div style="width:40%;height:70%;margin-left:10%;">
            <el-select v-model="value" placeholder="请选择" @change="selectChange">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div class="char_left">
          <VEcharts
            v-if="optsLeft"
            autoresize
            :options="optsLeft"
            style="width: 100%; height: 100%"
            @click="godistion"
          />
        </div>
      </div>
      <div class="town_right_bot">
        <div class="title_list">
          <img src="@/assets/img/townPreview/bar chart.png" alt="">
          <h3>按项目分类</h3>
        </div>
        <div class="Bingtu">
          <VEcharts
            v-if="optsBingtu"
            autoresize
            :options="optsBingtu"
            style="width: 100%; height: 100%"
            @mouseover="pingOver"
          />
        </div>
      </div>
    </div>
    <div class="town_mid">
      <ul class="mid_top">
        <li
          v-for="(item, index) in mid_list"
          :key="index"
          @click="goProject(index,item.data)"
        >
          <p>{{ item.data }}</p>
          <span>{{ item.headerName }}</span>
        </li>
      </ul>
      <div class="mid_bot">
        <img :src="picurl" class="pic_shi" alt="">
        <img src="@/assets/img/townPreview/镇街照片.png" alt="">
      </div>
    </div>
    <div class="town_right">
      <div class="town_right_top">
        <div class="title_right">
          <div class="title_list">
            <img src="@/assets/img/townPreview/bar chart.png" alt="">
            <h3>项目列表 (万元)</h3>
          </div>
          <div class="details_right" @click="gomainTown">查看详情</div>
        </div>
        <div class="table_list">
          <el-table
            ref="table"
            :header-cell-style="{
              color: '#32c5ff',
              background: '#58a3e0',
              textAlign: ' center',
              height:'50px'
            }"
            :data="tableData"
            :cell-style="{ color: '#32c5ff', textAlign: 'center',fontSize:'12px'}"
            style="width: 100%;border-radius: 8px;"
            height="93%"
            @row-click="goTableProject"
          >
            <!-- <el-table-column prop="PROGRAMNAME" label="项目名称" show-overflow-tooltip="true"/> -->
            <el-table-column prop="PROGRAMNAME" label="项目名称" />
            <el-table-column prop="MONEY1" label="总预算" />
            <el-table-column prop="MONEY2" label="拨付金额" />
            <el-table-column prop="RATE" label="资金使用率" />
          </el-table>
          <!-- <dv-scroll-board
            :config="config"
            style="height:90%;color:#32C5FF;border-radius: 8px;"
            @click="goTableProject"
          /> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import VEcharts from '@/components/vecharts';
import p from '@/utils/processRequest1';
import {
  getQueryBodyByProduce,
  getReportHeaderByTableId
} from '@/api/dynamicInterface';
let index = -1;
export default {
  components: {
    VEcharts
  },
  data() {
    return {
      tableData: [],
      picurl: '',
      left_list: {
        tx: [],
        Yss: [],
        ZHS: [],
        RATE: []
      },
      mid_list: [],
      // config: {},
      bing_du: [],
      timer: null,
      Listfu: { Yss: [], ZHS: [], RATE: [] },
      optionList: [],
      mTime: null,
      options: [
        {
          value: '1',
          label: '公共预算支出 '
        },
        {
          value: '2',
          label: '基金预算支出 '
        }
      ],
      value: '公共预算支出'
    };
  },
  computed: {
    optsLeft() {
      const _this = this;
      const newArr = {
        color: ['#5b8ff9', 'rgba(216,224,240,0.8)'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {
          orient: 'vertical',
          data: ['预算数', '支出数'],
          right: '5%',
          top: '0%',
          textStyle: {
            // 图例文字的样式
            color: '#ffffff;',
            fontSize: 12
          }
        },
        grid: {
          top: '2%',
          left: '2%',
          right: '12%',
          bottom: '6%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          show: false
        },
        yAxis: {
          axisLabel: {
            interval: 0,
            rotate: 25,
            fontSize: 16
          },
          type: 'category',
          data: this.left_list.tx,
          axisLine: {
            lineStyle: {
              color: '#32c5ff'
            }
          }
        },
        series: [
          {
            name: '执行率',
            type: 'bar',
            // stack: 'total',
            barMaxWidth: '50',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              normal: {
                label: {
                  show: true, // 是否显示
                  position: 'right', // 显示位置
                  textStyle: {
                    // 文字样式
                    color: '#1fd2ff',
                    fontSize: '15'
                  },
                  formatter: function(params) {
                    // 核心部分 formatter 可以为字符串也可以是回调
                    if (params.value) {
                      // 如果当前值存在则拼接
                      return `${_this.left_list.RATE[params.dataIndex]}%`;
                    } else {
                      // 否则返回个空
                      return '0%';
                    }
                  }
                }
              }
            },
            data: this.left_list.RATE
          }
          // {
          //   name: "预算数",
          //   type: "bar",
          //   // stack: 'total',
          //   barMaxWidth: "50",
          //   label: {
          //     show: false
          //   },
          //   itemStyle: {
          //     normal: {
          //       label: {
          //         show: true, // 是否显示
          //         position: "right", // 显示位置
          //         verticalAlign: "top",
          //         textStyle: {
          //           // 文字样式
          //           color: "#1fd2ff",
          //           fontSize: "16"
          //         },
          //         formatter: function(params) {
          //           // 核心部分 formatter 可以为字符串也可以是回调
          //           if (params.value) {
          //             // 如果当前值存在则拼接
          //             return _this.left_list.RATE[params.dataIndex];
          //           } else {
          //             // 否则返回个空
          //             return "";
          //           }
          //         }
          //       }
          //     }
          //   },
          //   emphasis: {
          //     focus: "series"
          //   },
          //   data: this.left_list.Yss
          // },
          // {
          //   name: "支出数",
          //   type: "bar",
          //   // stack: 'total',
          //   barMaxWidth: "50",

          //   emphasis: {
          //     focus: "series"
          //   },
          //   data: this.left_list.ZHS
          // }
        ]
      };
      return newArr;
    },
    optsBingtu() {
      const newArr2 = {
        // title: {
        //   text: "税种组成",
        //   left: "center"
        // },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: '4%',
          textStyle: {
            // 图例文字的样式
            color: '#1fd2ff',
            fontSize: 12
          }
        },
        series: [
          {
            name: '项目分类',
            type: 'pie',
            radius: '70%',
            data: this.bing_du,
            center: ['40%', '60%'],
            label: {
              show: true,
              // position: "inner",
              formatter: function(params) {
                return params.value;
              },
              textStyle: {
                color: '#faad14',
                fontSize: 20
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            color: ['#1E90FF', '#00BFFF', '#87CEFA']
          }
        ]
      };
      return newArr2;
    },
    menuList() {
      return this.$store.state.permission.menuList;
    }
  },
  async created() {
    const { url } = await p();
    this.picurl = `${url}/onlinePreview?fileId=${this.$route.query.FILEID}`;
    this.getleft();
    this.getMid();
    this.getTable();
    this.getTownList();
  },
  mounted() {
    // this.timer = setTimeout(() => {
    //   // this.left_list.tx=[]
    //   this.left_list.Yss = [];
    //   this.left_list.ZHS = [];
    //   this.left_list.RATE = [];
    //   // this.getleft();
    //   setTimeout(() => {
    //     this.left_list.Yss = this.Listfu.Yss;
    //     this.left_list.ZHS = this.Listfu.ZHS;
    //     this.left_list.RATE = this.Listfu.RATE;
    //   }, 800);
    // }, 2000);
  },

  beforeDestroy() {
    // 页面关闭时清除定时器
    clearInterval(this.timer);
    clearInterval(this.mTime);
  },
  methods: {
    pieActive() {
      // 高亮所在下标
      const dataLength = 3; // 当前饼图有多少个扇形
      // 用定时器控制饼图高亮
      this.mTime = setTimeout(() => {
        // 清除之前的高亮
        this.$children[2].dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: index
        });
        index = (index + 1) % dataLength;
        // 当前下标高亮
        this.$children[2].dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: index
        });
        this.$children[2].dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: index
        });
        if (index > dataLength) {
          index = 0;
        }
      }, 2000);
    },
    // 鼠标划入
    pingOver() {
      clearInterval(this.mTime);
      // this.$children[1].dispatchAction({
      //   type: 'downplay',
      //   seriesIndex: 0,
      //   dataIndex: index
      // });
    },
    // pingOut() {
    //   this.pieActive();
    // },
    getleft(id = 530) {
      let flag = true;
      if (this.left_list.tx.length) {
        flag = false;
      }
      getQueryBodyByProduce({
        filterList: [
          { col: 'ENTERPRISECODE', value: this.$route.query.ENTERPRISECODE }
        ],
        pageIndex: 0,
        pageSize: 15,
        pageType: 1,
        tableId: id
      }).then(res => {
        if (res.success) {
          res.data.sort((a, b) => {
            return b.RATE.split('%')[0] - a.RATE.split('%')[0];
          });
          res.data.forEach(item => {
            if (item.RATE !== '0.00%') {
              if (flag) {
                this.left_list.tx.unshift(item.DIVISION);
              }
              this.left_list.Yss.unshift(item.MONEY1);
              this.left_list.ZHS.unshift(item.MONEY2);
              this.left_list.RATE.unshift(
                (+item.RATE.split('%')[0]).toFixed(0)
              );
            }
          });
          this.Listfu.Yss = this.left_list.Yss;
          this.Listfu.ZHS = this.left_list.ZHS;
          this.Listfu.RATE = this.left_list.RATE;
        } else {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'warning'
          });
        }
      });
    },
    async getMid() {
      let rea1data = [];
      let res2data = [];
      const res1 = await getReportHeaderByTableId({ tableId: 412 });
      if (res1.success) {
        rea1data = res1.data.sort((a, b) => {
          return a.orderId - b.orderId;
        });
      } else {
        this.$message({
          showClose: true,
          message: res1.message,
          type: 'warning'
        });
      }
      const res = await getQueryBodyByProduce({
        filterList: [
          { col: 'ENTERPRISECODE', value: this.$route.query.ENTERPRISECODE }
        ],
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 412
      });
      if (res.success) {
        res2data = res.data[0];
        //  this.mid_list[4].data=res.data[0].ENTERPRISECODE;
        //  this.mid_list[3].data=res.data[0].MONEY1;
        //  this.mid_list[5].data=res.data[0].MONEY2;
        //  this.mid_list[2].data=res.data[0].ENTERPRISENAME
      } else {
        this.$message({
          showClose: true,
          message: res.message,
          type: 'warning'
        });
      }

      rea1data.forEach(item => {
        if (item.title !== '乡镇编码') {
          //  this.mid_list.push({
          //     headerName: item.title,
          //   });

          if (item.title === '乡镇名称') {
            this.mid_list.push({
              headerName: '镇街名称',
              data: res2data.ENTERPRISENAME
            });
          } else if (item.title === '已拨付金额（万元）') {
            this.mid_list.push({
              headerName: item.title,
              data: res2data.MONEY2
            });
          } else if (item.title === '总预算数（万元）') {
            this.mid_list.push({
              headerName: item.title,
              data: res2data.MONEY1
            });
          } else if (item.title === '剩余可拨付（万元）') {
            this.mid_list.push({
              headerName: item.title,
              data: (res2data.MONEY1 - res2data.MONEY2).toFixed(2)
            });
          } else if (item.title === '总项目数（个）') {
            this.mid_list.push({
              headerName: item.title,
              data: res2data.XZTJS_ZXMS
            });
          } else if (item.title === '公共预算支出') {
            this.mid_list.push({
              headerName: item.title,
              data: res2data.GGYSZC
            });
            this.bing_du.push({
              name: '公共预算支出',
              value: res2data.GGYSZC
            });
          } else if (item.title === '一卡通（个）') {
            this.mid_list.push({
              headerName: item.title,
              data: res2data.XZTJS_YKT
            });
          } else if (item.title === '其他支出') {
            this.mid_list.push({
              headerName: item.title,
              data: res2data.QTZC
            });
            this.bing_du.push({
              name: '其他支出',
              value: res2data.QTZC
            });
          } else if (item.title === '基金预算支出') {
            this.mid_list.push({
              headerName: item.title,
              data: res2data.JJYSZC || 0
            });
            this.bing_du.push({
              name: '基金预算支出',
              value: res2data.JJYSZC
            });
          }
        }
      });
      //  this.mid_list[0].data=res2data.ENTERPRISENAME;
      //  this.mid_list[1].data=res2data.MONEY2;//已拨付金额
      //  this.mid_list[2].data=res2data.MONEY1;//总预算
      //  this.mid_list[3].data=res2data.XZTJS_SYKBF;//剩余可拨付
      //  this.mid_list[4].data=res2data.XZTJS_ZXMS;//总项目数
      //  this.mid_list[5].data=res2data.XZTJS_ZXXM;//专项项目
      //  this.mid_list[6].data=res2data.XZTJS_YKT;//一卡通
      //  this.mid_list[7].data=res2data.XZTJS_JBZC;//基本支出
      //  this.mid_list[8].data=res2data.XZTJS_GYJF;//公用经费
      this.pieActive();
    },
    getTable() {
      getQueryBodyByProduce({
        filterList: [
          { col: 'ENTERPRISECODE', value: this.$route.query.ENTERPRISECODE }
        ],
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 413
      }).then(res => {
        // const data = [];
        if (res.success) {
          res.data.forEach(item => {
            // data.push([item.PROGRAMNAME, item.MONEY1, item.MONEY2, item.RATE]);
            this.tableData.push({ PROGRAMNAME: item.PROGRAMNAME, MONEY1: item.MONEY1, MONEY2: item.MONEY2, RATE: item.RATE });
          });
          // this.config = {
          //   header: ['项目名称', '总预算', '拨付金额', '资金使用率'],
          //   data: data,
          //   headerBGC: '#58a3e0',
          //   columnWidth: [4500, 2000, 2000, 2000],
          //   align: ['center', 'center', 'center', 'center'],
          //   oddRowBGC: 'transparent',
          //   evenRowBGC: 'transparent',
          //   rowNum: 8
          // };
        } else {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'warning'
          });
        }
      });
    },
    goProject(val, num) {
      if (val < 4) {
        // this.menuList.forEach(item => {
        //   if (item.meta.title === "项目分析") {
        if (val === 0 || val === 1) {
          this.goRouteBtn('项目分析', 1, 'ORDERBY');
        }
        if (val === 2) {
          this.goRouteBtn('项目分析', 2, 'ORDERBY');
        }
        if (val === 3) {
          this.goRouteBtn('项目分析', 3, 'ORDERBY');
        }
      } else if (val === 4) {
        this.goRouteBtn('项目分析', 1, 'ORDERBY');
      } else if (val === 5) {
        if (num !== 0) {
          this.goRoute('一卡通', 1);
        }
      } else if (val === 6) {
        if (num !== 0) {
          this.goRouteBtn('项目分析', '专项项目', 'XMLX');
        }
      } else if (val === 7) {
        if (num !== 0) {
          this.goRouteBtn('项目分析', '基本支出', 'XMLX');
        }
      } else if (val === 8) {
        if (num !== 0) {
          this.goRouteBtn('项目分析', '公用经费', 'XMLX');
        }
      }
    },
    getTownList() {
      getQueryBodyByProduce({
        tableId: 391,
        pageIndex: 0,
        pageSize: 100,
        pageType: 1
      }).then(res => {
        if (res.success) {
          this.optionList = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    goRoute(tilte, isUnfold = 0) {
      const { title } = this.$route.query;
      this.optionList.forEach(it => {
        if (it.ENTERPRISENAME === this.$route.query.ENTERPRISENAME) {
          this.menuList.forEach(item => {
            if (item.meta.title === tilte) {
              if (item.children) {
                item.children.forEach(chit => {
                  if (chit.meta.title === tilte) {
                    const params = {
                      path: chit.path,
                      query: {
                        title: chit.meta.title,
                        menuId: chit.id,
                        flag: 0,
                        // isShow: isShow,
                        sId: 'TabsTable',
                        ENTERPRISECODE: it.ENTERPRISECODE,
                        ENTERPRISENAME: it.ENTERPRISENAME,
                        FILEID: it.FILEID,
                        isHideLeft: chit.isHideLeft,
                        isHideTop: chit.isHideTop,
                        isUnfold: isUnfold,
                        routeTitle: title
                      }
                    };
                    this.$router.push(params);
                  } else {
                    const params = {
                      path: chit.path,
                      query: {
                        title: item.meta.title,
                        menuId: item.id,
                        flag: 0,
                        // isShow: isShow,
                        sId: 'TabsTable',
                        ENTERPRISECODE: it.ENTERPRISECODE,
                        ENTERPRISENAME: it.ENTERPRISENAME,
                        FILEID: it.FILEID,
                        isHideLeft: item.isHideLeft,
                        isHideTop: item.isHideTop,
                        isUnfold: isUnfold,
                        routeTitle: title
                      }
                    };
                    this.$router.push(params);
                  }
                });
              } else {
                const params = {
                  path: item.path,
                  query: {
                    title: item.meta.title,
                    menuId: item.id,
                    flag: 0,
                    // isShow: isShow,
                    sId: 'TabsTable',
                    ENTERPRISECODE: it.ENTERPRISECODE,
                    ENTERPRISENAME: it.ENTERPRISENAME,
                    FILEID: it.FILEID,
                    isHideLeft: item.isHideLeft,
                    isHideTop: item.isHideTop,
                    isUnfold: isUnfold,
                    routeTitle: title
                  }
                };
                this.$router.push(params);
              }
            }
          });
        }
      });
    },
    goRouteBtn(tilte, name, code) {
      const { title } = this.$route.query;
      this.optionList.forEach(it => {
        if (it.ENTERPRISENAME === this.$route.query.ENTERPRISENAME) {
          this.menuList.forEach(item => {
            if (item.meta.title === tilte) {
              if (item.children) {
                item.children.forEach(chit => {
                  if (chit.meta.title === tilte) {
                    const params = {
                      path: chit.path,
                      query: {
                        title: chit.meta.title,
                        menuId: chit.id,
                        flag: 0,
                        // isShow: isShow,
                        sId: 'TabsTable',
                        ENTERPRISECODE: it.ENTERPRISECODE,
                        ENTERPRISENAME: it.ENTERPRISENAME,
                        FILEID: it.FILEID,
                        isHideLeft: chit.isHideLeft,
                        isHideTop: chit.isHideTop,
                        [code]: name,
                        routeTitle: title
                      }
                    };
                    this.$router.push(params);
                  } else {
                    const params = {
                      path: chit.path,
                      query: {
                        title: item.meta.title,
                        menuId: item.id,
                        flag: 0,
                        // isShow: isShow,
                        sId: 'TabsTable',
                        ENTERPRISECODE: it.ENTERPRISECODE,
                        ENTERPRISENAME: it.ENTERPRISENAME,
                        FILEID: it.FILEID,
                        isHideLeft: item.isHideLeft,
                        isHideTop: item.isHideTop,
                        [code]: name,
                        routeTitle: title
                      }
                    };
                    this.$router.push(params);
                  }
                });
              } else {
                const params = {
                  path: item.path,
                  query: {
                    title: item.meta.title,
                    menuId: item.id,
                    flag: 0,
                    // isShow: isShow,
                    sId: 'TabsTable',
                    ENTERPRISECODE: it.ENTERPRISECODE,
                    ENTERPRISENAME: it.ENTERPRISENAME,
                    FILEID: it.FILEID,
                    isHideLeft: item.isHideLeft,
                    isHideTop: item.isHideTop,
                    [code]: name,
                    routeTitle: title
                  }
                };
                this.$router.push(params);
              }
            }
          });
        }
      });
    },
    goTableProject(row, ceil) {
      this.goRouteBtn('项目分析', row.PROGRAMNAME, 'PROGRAMNAME');
    },
    gomainTown() {
      this.goRouteBtn('项目分析', 1, 'MAIN');
    },
    selectChange(val) {
      if (val === '1') {
        this.left_list.Yss = [];
        this.left_list.ZHS = [];
        this.left_list.RATE = [];
        this.left_list.tx = [];

        this.getleft(530);
      } else if (val === '2') {
        this.left_list.Yss = [];
        this.left_list.ZHS = [];
        this.left_list.RATE = [];
        this.left_list.tx = [];
        this.getleft(531);
      }
    },
    godistion(val) {
      this.goRouteBtn('项目分析', val.name, 'DIVISION');
    }
  }
};
</script>
<style lang="scss" scoped>
$vw: 1920px;
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
.town {
  height: 100%;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.town_left {
  width: 24%;

  height: 100%;
  .town_left_top {
    background: url("~@/assets/img/townPreview/路径.png") 0 0 no-repeat;
    background-size: 100% 100%;
    height: 66%;
  }
}
.town_mid {
  width: 50%;
  .mid_top {
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: space-between;
    li:nth-of-type(1) {
      p {
        margin-bottom: 5px;
      }
    }
    li {
      cursor: pointer;
      width: 33%;
      height: 32%;
      background: url("~@/assets/img/townPreview/矩形.png") 0 0 no-repeat;
      background-size: 100% 100%;
      list-style: none;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      p {
        margin: 0;
        font-size: 32px;
        font-family: DINCondensed, DINCondensed-Bold;
        font-weight: 700;
        color: #faad14;
        text-align: center;
        width: 90%;
        overflow: hidden;
        height: 40px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      span {
        color: #4ca7ed;
      }
    }
  }
  .mid_bot {
    height: calc(60% - 16px);
    position: relative;
    .pic_shi {
      border-radius: 20px;
      opacity: 0.7;
    }
    img {
      position: absolute;
      width: 100%;
      height: 100%;
    }
  }
}
.town_right {
  width: 24%;

  height: 100%;
  .town_right_top {
    background: url("~@/assets/img/townPreview/路径.png") 0 0 no-repeat;
    background-size: 100% 100%;
    height: 100%;
  }
}
.town_right_bot {
  height: calc(34% - 16px);
  background: url("~@/assets/img/townPreview/镇街照片.png") 0 0 no-repeat;
  background-size: 100% 100%;
  margin-top: 1em;
  .title_list {
    height: 18%;
    display: flex;
    align-items: center;
    padding-left: 25px;
    h3 {
      color: #1fd2ff;
      font-size: 18px;
      margin: 0;
      margin-left: 8px;
    }
  }
  .Bingtu {
    height: calc(88% - 20px);
  }
}
.title_left {
  height: 10%;
  display: flex;
  align-items: center;
  padding-left: 25px;
  img {
    margin-right: 8px;
    vertical-align: bottom;
  }
  h3 {
    color: #1fd2ff;
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    margin: 0;
  }
}

.char_left {
  height: 94%;
}
.title_right {
  padding-right: 18px;
  justify-content: space-between;
  height: 8%;
  display: flex;
  align-items: center;
  padding-left: 25px;
  padding-top: 2%;
  img {
    margin-right: 8px;
    vertical-align: bottom;
  }
  h3 {
    color: #1fd2ff;
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    margin: 0;
  }
  .title_list {
    display: flex;
    height: 60%;
    align-items: center;
  }
  .details_right {
    border: 1px solid #1fd2ff;
    border-radius: 3px;
    padding: 4px 10px;
    color: #1fd2ff;
    font-size: 14px;
    cursor: pointer;
  }
}
.table_list {
  margin-top: 10px;
  height: calc(92% - 10px);
  padding: 0 13px;
}
/deep/ .el-table,
/deep/ .el-table__expanded-cell {
  background-color: transparent;
}
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  background-color: transparent;
}
/deep/.el-table td,
.el-table th.is-leaf {
  border: 0;
  // border-bottom: 1px solid #32c5ff;
}
/deep/.el-table--group::after,
.el-table--border::after,
.el-table::before {
  background-color: transparent;
}
/deep/.el-table tr {
  position: relative;
}
/deep/.el-table tr::after {
  content: "";
  position: absolute;
  left: 12%;
  right: -12%;
  display: block;
  border-bottom: 1px solid !important;
  border-image: linear-gradient(
      122deg,
      rgba(50, 197, 255, 0) 5%,
      #32c5ff 40%,
      rgba(50, 197, 255, 0) 71%
    )
    1 1 !important;
}
/deep/.el-table__body tr:hover > td {
  background-color: rgba(91, 143, 249, 0.35) !important;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 4px;
  height: 6px;
}
// 设置滚动条的背景色和圆角
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: rgb(38, 166, 240);
  border-radius: 8px;
}
/deep/.el-table__body-wrapper .el-table__row {
  height: 55px;
}
/deep/.el-table .cell{
  padding: 0!important;
}
.hidden-tbody.el-table {
  height: 34px;
  box-sizing: border-box;
  tbody {
    //隐藏上面表格的tbody
    display: none;
    overflow: hidden;
  }
}

/deep/.dv-scroll-board .header {
  color: #1fd2ff;
}
/deep/.dv-scroll-board .row-item {
  border-bottom: 1px solid;
  border-image: linear-gradient(
      122deg,
      rgba(50, 197, 255, 0) 15%,
      #32c5ff 50%,
      rgba(50, 197, 255, 0) 85%
    )
    1 1;
}
/deep/.dv-scroll-board .row-item .ceil {
  white-space: normal;
  text-overflow: clip;
  overflow: hidden;
  height: 100%;
  line-height: normal;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: px2vw(14px);
}

/deep/.el-input__inner{
background-color: transparent;
border: none;
color: #1fd2ff;
}
</style>
